'use client'
import { useState } from 'react'
import useSWR from 'swr'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
import relativeTime from 'dayjs/plugin/relativeTime'
import { useContext } from 'use-context-selector'
import { RiUserAddLine } from '@remixicon/react'
import { useTranslation } from 'react-i18next'
import InviteModal from './invite-modal'
import InvitedModal from './invited-modal'
import EditWorkspaceModal from './edit-workspace-modal'
import EditInviteModal from './edit-invite-modal'
import Operation from './operation'
import { fetchMembers } from '@/service/common'
import I18n from '@/context/i18n'
import { useAppContext } from '@/context/app-context'
import Avatar from '@/app/components/base/avatar'
import type { InvitationResult } from '@/models/common'
import { useProviderContext } from '@/context/provider-context'
import { Plan } from '@/app/components/billing/type'
import Button from '@/app/components/base/button'
import UpgradeBtn from '@/app/components/billing/upgrade-btn'
import { NUM_INFINITE } from '@/app/components/billing/config'
import { LanguagesSupported } from '@/i18n/language'
import cn from '@/utils/classnames'
import Tooltip from '@/app/components/base/tooltip'
import { RiPencilLine } from '@remixicon/react'
import { useGlobalPublicStore } from '@/context/global-public-context'
dayjs.extend(relativeTime)

const MembersPage = () => {
  const { t } = useTranslation()
  const RoleMap = {
    owner: t('common.members.owner'),
    admin: t('common.members.admin'),
    editor: t('common.members.editor'),
    dataset_operator: t('common.members.datasetOperator'),
    normal: t('common.members.normal'),
  }
  const { locale } = useContext(I18n)

  const { userProfile, currentWorkspace, isCurrentWorkspaceOwner, isCurrentWorkspaceManager } = useAppContext()
  const { data, mutate } = useSWR(
    {
      url: '/workspaces/current/members',
      params: {},
    },
    fetchMembers,
  )
  const { systemFeatures } = useGlobalPublicStore()
  const [inviteModalVisible, setInviteModalVisible] = useState(false)
  const [invitationResults, setInvitationResults] = useState<InvitationResult[]>([])
  const [invitedModalVisible, setInvitedModalVisible] = useState(false)
  const accounts = data?.accounts || []
  const { plan, enableBilling } = useProviderContext()
  const isNotUnlimitedMemberPlan = enableBilling && plan.type !== Plan.team && plan.type !== Plan.enterprise
  const isMemberFull = enableBilling && isNotUnlimitedMemberPlan && accounts.length >= plan.total.teamMembers
  const [editWorkspaceModalVisible, setEditWorkspaceModalVisible] = useState(false)
  const [editInviteModalVisible, setEditInviteModalVisible] = useState(false)
  const [id, setId] = useState('')
  const [name, setName] = useState('')
  const [deptName, setDeptName] = useState('')
  const handleEdit = (id: string, name: string, deptName: string) => () => {
    setDeptName(deptName)
    setName(name)
    setId(id)
    setEditInviteModalVisible(true)
    // setEditWorkspaceModalData({ id, name, deptName })
  }
  return (
    <>
      <div className='flex flex-col'>
        <div className='mb-4 flex items-center gap-3 rounded-xl border-l-[0.5px] border-t-[0.5px] border-divider-subtle from-background-gradient-bg-fill-chat-bg-2 to-background-gradient-bg-fill-chat-bg-1 p-3 pr-5'>
          {/* <div className='flex h-12 w-12 items-center justify-center rounded-xl bg-components-icon-bg-blue-solid text-[20px]'>
            <span className='font-semibold uppercase bg-gradient-to-r from-components-avatar-shape-fill-stop-0 to-components-avatar-shape-fill-stop-100 bg-clip-text text-shadow-shadow-1 opacity-90'>{currentWorkspace?.name[0]?.toLocaleUpperCase()}</span>
          </div> */}
          <div className='grow'>
            <div className='flex items-center gap-1 text-text-secondary'>
              <span>{currentWorkspace?.name}</span>
              {isCurrentWorkspaceOwner && <span>
                <Tooltip
                  popupContent={t('common.account.editWorkspaceInfo')}
                  needsDelay
                >
                  <div
                    className='p-1 rounded-md cursor-pointer hover:bg-black/5'
                    onClick={() => {
                      setEditWorkspaceModalVisible(true)
                    }}
                  >
                    <RiPencilLine className='w-4 h-4 text-text-tertiary' />
                  </div>
                </Tooltip>
              </span>}
            </div>
            <div className='mt-1 system-xs-medium text-text-tertiary'>
              {enableBilling && isNotUnlimitedMemberPlan
                ? (
                  <div className='flex space-x-1'>
                    <div>{t('billing.plansCommon.member')}{locale !== LanguagesSupported[1] && accounts.length > 1 && 's'}</div>
                    <div className=''>{accounts.length}</div>
                    <div>/</div>
                    <div>{plan.total.teamMembers === NUM_INFINITE ? t('billing.plansCommon.unlimited') : plan.total.teamMembers}</div>
                  </div>
                )
                : (
                  <div className='flex space-x-1'>
                    <div>{accounts.length}</div>
                    <div>{t('billing.plansCommon.memberAfter')}{locale !== LanguagesSupported[1] && accounts.length > 1 && 's'}</div>
                  </div>
                )}
            </div>

          </div>
          {isMemberFull && (
            <UpgradeBtn className='mr-2' loc='member-invite' />
          )}
          <Button variant='primary' className={cn('shrink-0')} disabled={!isCurrentWorkspaceManager || isMemberFull} onClick={() => setInviteModalVisible(true)}>
            <RiUserAddLine className='w-4 h-4 mr-1' />
            {t('common.members.invite')}
          </Button>
        </div>
        <div className='overflow-visible lg:overflow-visible'>
          <div className='flex min-w-[480px] items-center border-b border-divider-regular py-[7px]'>
            <div className='w-[150px] px-3 text-[18px] text-black'>序号</div>
            <div className='px-3 text-[18px] text-black grow flex-1'>用户</div>
            <div className='px-3 text-[18px] text-black grow flex-1'>科室</div>
            <div className='flex-1 px-3 text-[18px] text-black grow'>账号</div>
            <div className='text-[18px] text-black w-[150px] shrink-0'>{t('common.members.lastActive')}</div>
            <div className='text-[18px] text-black w-[126px] shrink-0 px-3'>{t('common.members.role')}</div>
            <div className='text-[18px] text-black w-[126px] text-center shrink-0 px-3'>操作</div>
          </div>
          <div className='relative min-w-[480px]'>
            {
              accounts.map((account, index) => (
                <div key={account.id} className='flex border-b border-divider-subtle'>
                  <div className='flex w-[150px] shrink-0 items-center py-2 px-3 text-black'>{index + 1}</div>
                  <div className='flex items-center flex-1 px-3 py-2 grow'>
                    <div className=''>
                      {account.name}
                      {account.status === 'pending' && <span className='ml-1'>{t('common.members.pending')}</span>}
                      {userProfile.email === account.email && <span className=''>{t('common.members.you')}</span>}
                    </div>
                  </div>
                  <div className='flex items-center flex-1 px-3 py-2 grow'>
                    <div className='text-black'>{account.dept_name}</div>
                  </div>
                  <div className='flex items-center flex-1 px-3 py-2 grow'>
                    <div className='text-black'>{account.email.replace('@admin.com','')}</div>
                  </div>
                  <div className='flex w-[150px] shrink-0 items-center py-2 text-black'>{dayjs(Number((account.last_active_at || account.created_at)) * 1000).locale(locale === 'zh-Hans' ? 'zh-cn' : 'en').fromNow()}</div>
                  <div className='flex w-[126px] shrink-0 items-center'>
                    {
                      isCurrentWorkspaceOwner && account.role !== 'owner'
                        ? <Operation member={account} operatorRole={currentWorkspace.role} onOperate={mutate} />
                        : <div className='px-3 text-black'>{RoleMap[account.role] || RoleMap.normal}</div>
                    }
                  </div>
                  <div className='flex w-[126px] shrink-0 items-center'>
                    <Button
                      variant='ghost'
                      onClick={handleEdit(account.id, account.name, account.dept_name)}
                      className="w-full h-12"
                      disabled={!isCurrentWorkspaceManager || isMemberFull}
                    >编辑</Button>
                  </div>
                </div>
              ))
            }
          </div>
        </div>
      </div >
      {
        inviteModalVisible && (
          <InviteModal
            isEmailSetup={systemFeatures.is_email_setup}
            onCancel={() => setInviteModalVisible(false)}
            onSend={(invitationResults) => {
              setInvitationResults(invitationResults)
              mutate()
            }}
          />
        )
      }
      {
        editInviteModalVisible && (
          <EditInviteModal
            ids={id}
            names={name}
            deptNames={deptName}
            onCancel={() => setEditInviteModalVisible(false)}
            onSend={(invitationResults) => {
              setInvitationResults(invitationResults)
              mutate()
            }}
          />
        )
      }
      {/* 
{
  invitedModalVisible && (
    <InvitedModal
      invitationResults={invitationResults}
      onCancel={() => setInvitedModalVisible(false)}
    />
  )
} */}
      {
        editWorkspaceModalVisible && (
          <EditWorkspaceModal
            onCancel={() => setEditWorkspaceModalVisible(false)}
          />
        )
      }


    </>
  )
}

export default MembersPage
